<template>
  <div class="meeting-home">
    <div class="meeting-home-box">
      <div class="header">
        <div class="box">
          <span class="label">发起人</span>
          <span class="value">{{MeetingData.userName}}</span>
        </div>
        <div class="box" v-if="MeetingData.type === 1">
          <span class="label">房间号</span>
          <span class="value">{{MeetingData.roomNumber}}</span>
        </div>
        <div class="box" v-if="MeetingData.type === 1">
          <span class="label">会议室</span>
          <span class="value">{{MeetingData.roomName}}</span>
        </div>
        <div class="box">
          <span class="label">签到范围</span>
          <span class="value">{{MeetingData.timeFrame}}分钟</span>
        </div>
        <div class="box">
          <span class="label">会议时间</span>
          <span class="value">{{MeetingData.startTime ? MeetingData.startTime.split(" ")[0] : ""}} {{MeetingData.startTime ? fromatDateTime(MeetingData.startTime) : ""}}-{{MeetingData.endTime ? fromatDateTime(MeetingData.endTime) : ""}}</span>
        </div>
        <div class="box">
          <span class="label">描述</span>
          <span class="value">{{MeetingData.describe}}</span>
        </div>
      </div>
      <div class="container">
        <div class="time-title">{{title}}</div>
        <div class="time-box">
          <Clock :second="second" :hour="hour" :miuntes="minute" />
        </div>
      </div>
      <div class="footer">
        <div class="title">{{signTitle}}</div>
        <div class="footer-box" v-if="MeetingData.meetingStatus !== 1 && userNumber !== MeetingData.userNumber" @click="goSign">{{signText}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { toRefs, ref, watch, onBeforeUnmount, computed } from "vue"
import { meetingStatus } from '@/enum.js'
import { useRouter } from 'vue-router'
import { useStore } from "vuex"
import { formatSeconds, gettime, timeDifference, calculateTimeRange } from '@/utils/formatDate'
import Clock from '@/components/flipClock/Clock.vue'
import { fromatDateTime } from "@/utils/formatDate.js"
import { Notify } from "vant"

export default {
    name: "MeetingHome",
    components: { Clock },
    props: {
        MeetingData: {
            type: Object,
            required: true
        },
        MeetingNoticeData: {
            type: Array,
            required: true
        },
    },
    emits: ["goAgainGetMeetingData"],
    setup(props, context) {
        const router = useRouter();
        const store = useStore();

        const userNumber = computed(() => store.getters.getUserNumber);

        const { MeetingData, MeetingNoticeData } = toRefs(props);

        // 获取当前时间
        const nowTime = gettime();
        // 总时间秒数
        let totalTime = ref(0);
        // 定时器
        let timer;
        // 标题
        let title = ref("");
        // 签到文本
        let signText = ref("");
        // 签到标题
        let signTitle = ref("");

        let minute = ref(0);
        let hour = ref(0);
        let second = ref(0);
       
        let currentPerosnObj = ref({});

        function calculateTotalTime() {
            if (timer) clearInterval(timer);
            // 计算距离会议结束的时间
            if (MeetingData.value.meetingStatus === 1) {
                const startTime = calculateTimeRange(MeetingData.value.startTime, MeetingData.value.timeFrame, 1)
                totalTime.value = timeDifference(nowTime, startTime);
                title.value = "距会议签到开始还有";
            } else if (MeetingData.value.meetingStatus === 3) {

                totalTime.value = timeDifference(nowTime, MeetingData.value.startTime);
                title.value = "距会议签到结束还有";
            }
            else if (MeetingData.value.meetingStatus === 4) {
                totalTime.value = timeDifference(nowTime, MeetingData.value.endTime);
                title.value = "距会议结束还有";
            } else if (MeetingData.value.meetingStatus === 5) {
                const endTime = calculateTimeRange(MeetingData.value.endTime, MeetingData.value.timeFrame, 0)
                totalTime.value = timeDifference(nowTime, endTime);
                title.value = "距签退结束还有";
            } else if (MeetingData.value.meetingStatus === 6) {
                title.value = "会议已结束";
            }
            updateTime()
            // 开启会议计时器
            timer = setInterval(function () {
                totalTime.value--;

                if (totalTime.value === 0)
                    goAgainGetMeetingData();
                
                updateTime()
            }, 1000);
        }

        function updateTime() {
          const times = formatSeconds(totalTime.value, 1);
          hour.value = times.split(" ")[0];
          minute.value = times.split(" ")[1];
          second.value = times.split(" ")[2];
        }
        // 监听是否获取到会议详情数据
        watch(() => MeetingData.value.endTime, () => {
            // 判断会议状态
            switch (MeetingData.value.meetingStatus) {
                case 1:
                    signTitle.value = "会议未开始";
                    break;
                case 3:
                    signText.value = "去签到";
                    signTitle.value = "会议签到中";
                    break;
                case 4:
                    signText.value = "去签到";
                    signTitle.value = "会议进行中";
                    break;
                case 5:
                    signText.value = "去签退";
                    signTitle.value = "会议签退中";
                    break;
                case 6:
                    signTitle.value = "会议已结束";
                    router.go(-1)
                    break;
                default:
                    signTitle.value = "会议已结束";
                    break;
            }
            calculateTotalTime();
        });
        watch(() => totalTime.value, () => {
          if (totalTime.value === 0) {
            calculateTotalTime()
          }
        })
        // 监听会议考勤数据
        // watch(() => MeetingNoticeData.value, () => {
            // 如果是会议发起人就不执行下面的代码
            // if (userNumber.value === MeetingData.value.userNumber)
            //     return;
            // let signType = "";
            // if (MeetingData.value.meetingStatus === 3 || MeetingData.value.meetingStatus === 4)
            //     signType = "signInStatus";
            // else if (MeetingData.value.meetingStatus === 5)
            //     signType = "signOutStatus";
            // currentPerosnObj.value = MeetingNoticeData.value.find(t => t.userNumber === userNumber.value);
            // switch (currentPerosnObj.value[signType]) {
            //     case 0:
            //         signText.value = signType === "signInStatus" ? "去签到" : "去签退";
            //         break;
            //     case 1:
            //         signText.value = signType === "signInStatus" ? "已签到" : "已签退";
            //         break;
            //     case 2:
            //         signText.value = "迟到";
            //         break;
            //     default:
            //         signText.value = "";
            //         break;
            // }
        // });

        // 重新获取会议详情
        function goAgainGetMeetingData() {
            context.emit("goAgainGetMeetingData");
        }
        // 签到签退
        function goSign() {
          currentPerosnObj.value = MeetingNoticeData.value.find(t => t.userNumber === userNumber.value);
          if (MeetingData.value.meetingStatus === 5) {
                if (currentPerosnObj.value.signOutStatus !== 0) {
                  Notify({ type: 'warning', duration: 1000, message: "你已签退" })
                  return;
                } else if (currentPerosnObj.value.isLeave === 1) {
                  Notify({ type: 'warning', duration: 1000, message: "你已请假，无需签退！" })
                  return;
                }
                // 签退
                router.push({
                    path: "/face",
                    query: {
                        id: 3,
                        meetingType: MeetingData.value.type,
                        meetingId: MeetingData.value.id,
                    },
                });
            }
            else if (MeetingData.value.meetingStatus === 3 || MeetingData.value.meetingStatus === 4) {
                if (currentPerosnObj.value.signInStatus !== 0) {
                  Notify({ type: 'warning', duration: 1000, message: "你已签过到" })
                  return;
                } else if (currentPerosnObj.value.isLeave === 1) {
                  Notify({ type: 'warning', duration: 1000, message: "你已请假，无需签到！" })
                  return;
                }
                // 签到
                router.push({
                    path: "/face",
                    query: {
                        id: 2,
                        meetingType: MeetingData.value.type,
                        meetingId: MeetingData.value.id,
                    },
                });
            }
        }
        onBeforeUnmount(() => {
            clearInterval(timer);
        });
        return {
            userNumber,
            second,
            minute,
            hour,
            title,
            signText,
            signTitle,
            totalTime,
            meetingStatus,
            formatSeconds,
            goSign,
            fromatDateTime
        };
    },
    
}
</script>

<style lang="scss">
.meeting-home {
  width: 100%;
  height: calc(100% - 5rem);
  display: flex;

  &-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem;
    display: flex;
    flex-direction: column;

    .header {
      width: 100%;
      min-height: 12rem;
      border-radius: var(--global-border-radius);
      background-color: #FFFFFF;
      font-size: 1.3rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      box-sizing: border-box;
      box-shadow: var(--box-shadow);

      .box {
        width: 100%;
        height: 3rem;
        display: flex;
        // flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 1rem;
        // background-color: #eee;
        border-bottom: 0.1rem solid var(--gray-color3);
        border-radius: var(--global-border-radius);

        .label {
          color: #000000;
          font-weight: 500;
        }

        .value {
          color: var(--gray-color2);
        }
        
        &:last-child {
          border-bottom: none;
        }
      }
    }

    .container {
      margin-top: 1rem;
      width: 100%;
      height: 18rem;
      border-radius: var(--global-border-radius);
      // position: relative;
      background-color: #FFFFFF;
      box-sizing: border-box;
      padding: 0 2rem;
      box-shadow: var(--box-shadow);

      .time-title {
        // position: absolute;
        // left: 0;
        // top: 0;
        width: 100%;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        font-size: 1.4rem;
        font-weight: 500;
      }

      .time-box {
        width: 100%;
        height: 12rem;
      }
    }
    
    .footer {
      margin-top: 1rem;
      width: 100%;
      flex: 1;
      background-color: #FFFFFF;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      border-radius: var(--global-border-radius);
      box-shadow: var(--box-shadow);

      &-box {
        $lhw: 10rem;
        width: $lhw;
        min-height: $lhw;
        line-height: $lhw;
        text-align: center;
        border-radius: 50%;
        color: #FFFFFF;
        box-shadow: var(-box-shadow);
        background-color: var(--blue-color1);

        &:active {
          animation: bigger 0.05s;
        }

        @keyframes bigger {
          0% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.03);
          }
          100% {
            transform: scale(1);
          }
        }
      }
    }
  }
}
</style>